<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../day3/css/style.css">
</head>

<body>

    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th>
                        <label for="">
                            <input type="checkbox" class="checkboxAll">&nbsp;&nbsp;全选
                        </label>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                    </th>
                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../day3/images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        var tbody = document.querySelector("#cartTable tbody");
        var xhr = new XMLHttpRequest();

        xhr.open("get", "../day3/data/data.json", true)
        xhr.send()
        xhr.onreadystatechange = function () {
            // console.log(1)
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText)
                // console.log(data)
                var html = ``
                data.forEach(({ goodsName, goodsPrice, goodsImg, buyNum }) => html += `
                <tr class="showTr">
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
                    <td class="price" >${goodsPrice.toFixed(2)}</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(buyNum * goodsPrice).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                `)
                tbody.innerHTML = html




            }
        }

        // 正选反选
        $(document).on("click", ".checkboxAll", function () {
            var $status = $(this).prop("checked")
            $(".check").prop("checked", $status);
        })
        $(document).on("click", ".check", function () {
            console.log($(".check").is(":not(:checked)"));
            var $flag = $(".check").is(":not(:checked)")
            $(".checkboxAll").prop("checked", !$flag);
            getTotal()
        })

        //添加
        $(document).on("click", ".add", function () {
            var num = $(this).prev().attr("value") * 1
            num++
            var price = ($(this).parents(".showTr").find(".price").text() * num).toFixed(2)
            $(this).prev().attr("value", num).parent().next().html(price)

            if (num > 1) {
                $(this).siblings(".reduce").css({ cursor: "pointer" }).html("-")
            }
            // console.log($(this).parent().siblings(".checkbox").find(".check").prop("checked"));
            getTotal()
        })
        //减少
        $(document).on("click", ".reduce", function () {
            var num = $(this).next().attr("value") * 1 - 1
            var price = ($(this).next().attr("value", num).parent().prev().html() * num).toFixed(2)
            if (num < 1) {
                $(this).css({ cursor: "no-drop" }).html("").next().attr("value", 1)
            } else {
                $(this).next().attr("value", num).parent().next().html(price)
            }
            getTotal()
        })
        //单删
        $(document).on("click", ".delete", function () {
            if (confirm("是否删除该商品？")) {
                $(this).parents("tr").remove();
                isAllChecked()
                getTotal()
            }
        })
        //多删
        $(document).on("click", "#deleteAll", function () {
            if (confirm("是否删除选中商品？")) {
                $(".check-one:checked").parents("tr").remove()
                isAllChecked()
                getTotal()
            }
        })

        function isAllChecked() {

            var flag = $(".check-one").is(":not(:checked)");
            console.log($(".check-one").length == 0);
            console.log(flag);
            $(".checkboxAll").prop("checked", $(".check-one").length == 0 ? false : !flag)

        }
        function getTotal() {
            var sum = 0;
            var allPrice = 0;
            $(".check-one:checked").each(function () {
                var num = $(this).parents("tr").find(".count-input").val() * 1
                var total = $(this).parents("tr").find(".subtotal").text() * 1
                sum += num;
                allPrice += total;
            })
            $("#selectedTotal").html(sum);
            $("#priceTotal").html(allPrice.toFixed(2))
        }



                // 正选反选
                // $(".checkboxAll").click(function () {
                //     var $status = $(this).prop("checked")
                //     $(".check").prop("checked", $status);
                // })

                // $(".check").click(function () {
                //     var $flag = $("check").is(":not(:checked)")
                //     $(".checkboxAll").prop("checked", $flag);
                //     // console.log($(this).prop("checked"));
                //     if ($(this).prop("checked") == true) {
                //         var totol = $(this).parent().siblings(".subtotal").html() * 1 + $("#priceTotal").html() * 1
                //         $("#priceTotal").html(totol)
                //         var num = $(this).parent().siblings(".count").find(".count-input").prop("value") * 1 + $("#selectedTotal").html() * 1
                //     } else {
                //         var totol = $("#priceTotal").html() * 1 - $(this).parent().siblings(".subtotal").html() * 1
                //         $("#priceTotal").html(totol)
                //     }

                // })

                // //添加
                // $(".add").click(function () {
                //     var num = $(this).prev().attr("value") * 1 + 1
                //     var price = ($(this).prev().attr("value", num).parent().prev().html() * num).toFixed(2)
                //     $(this).prev().attr("value", num).parent().next().html(price)

                //     if (num > 1) {
                //         $(this).siblings(".reduce").css({ cursor: "pointer" }).html("-")
                //     }
                //     // console.log($(this).parent().siblings(".checkbox").find(".check").prop("checked"));
                //     if ($(this).parent().siblings(".checkbox").find(".check").prop("checked") == true) {
                //         // console.log(1);
                //         var totol = $(this).parent().siblings(".price").html() * 1 + $("#priceTotal").html() * 1
                //         $("#priceTotal").html(totol)
                //     }
                // })
                // //减少
                // $(".reduce").click(function () {
                //     var num = $(this).next().attr("value") * 1 - 1
                //     var price = ($(this).next().attr("value", num).parent().prev().html() * num).toFixed(2)
                //     if (num < 1) {
                //         $(this).css({ cursor: "no-drop" }).html("").next().attr("value", 1)
                //     } else {
                //         $(this).next().attr("value", num).parent().next().html(price)
                //     }
                //     if ($(this).parent().siblings(".checkbox").find(".check").prop("checked") == true) {

                //         var totol = $("#priceTotal").html() * 1 - $(this).parent().siblings(".price").html() * 1
                //         $("#priceTotal").html(totol)
                //     }
                // })

                // //选择删除
                // $("#deleteAll").click(function () {
                //     $(".check").each(function () {
                //         if ($(this).prop("checked") == true) {
                //             console.log($(this).parent().siblings(".subtotal").html() * 1);
                //             var totol = $("#priceTotal").html() * 1 - $(this).parent().siblings(".subtotal").html() * 1
                //             $("#priceTotal").html(totol)
                //             $(this).parents(".showTr").remove()
                //         }
                //     })
                // })
                // //删除
                // $(".delete").click(function () {
                //     var totol = $("#priceTotal").html() * 1 - $(this).parent().siblings(".subtotal").html() * 1
                //     $("#priceTotal").html(totol)
                //     $(this).parents(".showTr").remove()
                // })







    </script>
</body>

</html>